<template>
  <div>
    <Row>
      <Col span="10">
        <Row style="margin:15px 0px;">
          <Col span="19">
            <Input v-model="query.keywords" @on-search="load(1)" search enter-button placeholder="输入老师姓名、手机号码" />
          </Col>
          <Col span="5">
            <Button style="margin-left:15px;" @click="refresh()">清空</Button>
          </Col>
        </Row>
      </Col>
    </Row>
    <Row>
      <Col span="24">
        <Table :no-data-text="noDataText" :loading="loading" :data="items" @on-sort-change="changeSort" :columns="columns" />
      </Col>
    </Row>
    <Row>
      <Col span="24">
        <div style="text-align:right;margin: 20px 10px;margin-bottom:120px;">
          <Page show-total :page-size-opts="[10, 20, 30]" @on-page-size-change="changeLimit" show-sizer @on-change="load" :page-size="query.limit" :current.sync="query.page" :total="total" size="small" />
        </div>
      </Col>
    </Row>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { fetchTeachers } from '@/graphql/query/teacher/index'
import emptyDataPNG from '@/assets/icons/empty_data.png'
import dayjs from 'dayjs'
import importPNG from '@/assets/icons/import.png'
import editPNG from '@/assets/icons/edit.png'
export default {
  data () {
    return {
      importPNG,
      editPNG,
      emptyDataPNG,
      columns: [
        {
          title: '序号',
          render: (h, params) => {
            const { limit, page } = this.query
            const startNumber = limit * (page - 1)
            const items = []
            items.push(
              h('span', {
              }, startNumber + params.index + 1)
            )
            return h('span', items)
          },
          width: 80,
          align: 'center'
        },
        {
          title: '姓名',
          width: 100,
          key: 'name'
        },
        {
          title: '手机号码',
          width: 120,
          key: 'phone'
        },
        {
          title: '头像',
          width: 100,
          render (h, params) {
            let { avatar, sex } = params.row
            if (!avatar) {
              const teaMale = 'https://duoduozhijiao.oss-cn-beijing.aliyuncs.com/nan.svg'
              const teaFemale = 'https://duoduozhijiao.oss-cn-beijing.aliyuncs.com/nv.svg'
              avatar = sex === 'male' ? teaMale : teaFemale
            }
            return h('img', {
              attrs: {
                src: avatar
              },
              style: {
                width: '50px',
                height: '50px',
                margin: '10px'
              }
            })
          },
          align: 'center'
        },
        {
          title: '备注名',
          width: 120,
          key: 'remarkName'
        },
        {
          title: '性别',
          width: 80,
          align: 'center',
          render: (h, params) => {
            const { row } = params
            const gender = row.sex === 'male' ? '男' : (row.sex === 'female' ? '女' : '未知')
            return h('span', gender)
          },
          filters: [
            {
              label: '男',
              value: 'male'
            },
            {
              label: '女',
              value: 'female'
            }
          ],
          filterMultiple: false,
          filterRemote: (value) => {
            this.query.gender = value.length > 0 ? value[0] : ''
            this.load(1)
          }
        },
        {
          title: '身份',
          width: 120,
          align: 'center',
          render (h, params) {
            const { role } = params.row
            const items = []
            for (let index = 0; index < role.length; index++) {
              const element = role[index]
              if (element === 'admin') {
                items.push('管理员')
                continue
              }
              if (element === 'master') {
                items.push('校长')
                continue
              }
              if (element === 'teacher') {
                items.push('教师')
                continue
              }
            }
            return h('div', items.join('、'))
          },
          filters: [
            {
              label: '校长',
              value: 'master'
            },
            {
              label: '老师',
              value: 'teacher'
            },
            {
              label: '管理员',
              value: 'admin'
            },
            {
              label: '教师+管理员',
              value: 'teacher,admin'
            }
          ],
          filterMultiple: false,
          filterRemote: (value) => {
            if (value.length > 0) {
              value = value[0].split(',')
            }
            this.query.roles = value
            console.log(value)
            this.load(1)
          }
        },
        {
          title: '创建时间',
          width: 150,
          key: 'created',
          align: 'center',
          render (h, params) {
            const { created } = params.row
            if (!created) {
              return h('span', '-')
            }
            const date = h('div', dayjs(created).format('YYYY-MM-DD'))
            const time = h('div', dayjs(created).format('HH:mm:ss'))
            return h('div', [date, time])
          },
          sortable: 'custom',
          sortType: 'normal'
        },
        {
          title: '创建方式',
          width: 120,
          align: 'center',
          render: (h, params) => {
            const { createMode } = params.row
            const { importPNG, editPNG } = this
            const iconPNG = createMode && createMode === 'app' ? editPNG : importPNG
            const createModeText = createMode && createMode === 'app' ? '录入' : '导入'
            const icon = h('img', {
              attrs: {
                src: iconPNG
              },
              style: {
                width: '1em',
                height: 'auto',
                marginRight: '2.5px'
              }
            })
            return h('span', {
              style: {
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center'
              }
            }, [icon, createModeText])
          },
          filters: [
            {
              label: '导入',
              value: 'import'
            },
            {
              label: '录入',
              value: 'app'
            }
          ],
          filterMultiple: false,
          filterRemote: (value) => {
            this.query.create_mode = value.length > 0 ? value[0] : ''
            this.load(1)
          }
        },
        {
          title: '创建人',
          key: 'creator',
          minWidth: 120,
          render: (h, params) => {
            const { row } = params
            return h('span', row.creator ? row.creator : '')
          }
        }
      ],
      items: [],
      query: {
        school: '',
        keywords: '',
        sort: '',
        create_mode: '',
        gender: '',
        limit: 20,
        page: 1,
        roles: []
      },
      total: 0,
      loading: false
    }
  },
  methods: {
    refresh () {
      this.query.keywords = ''
      this.query.sort = ''
      this.query.create_mode = ''
      this.query.sort_key = ''
      this.query.gender = ''
      this.query.roles = []
      this.$nextTick(() => this.load(1))
    },
    changeSort (sort) {
      this.query.sort = sort.order
      this.load(1)
    },
    changeLimit (limit) {
      this.query.limit = limit
    },
    load (page) {
      const { limit, keywords, gender, sort, roles, school } = this.query
      if (this.loading || !school || school === '') {
        return false
      }
      this.loading = true
      const input = { input: {
        school,
        limit,
        keywords,
        page,
        gender,
        sort,
        roles
      } }
      fetchTeachers(input).then(res => {
        const { teachers } = res.data
        const data = teachers
        this.query.page = data.current_page
        this.query.limit = data.limit
        this.items = data.data
        this.total = data.total
        this.$emit('on-change-total', this.total)
        this.loading = false
        document.querySelector('.content-wrapper').scrollTop = 1
      }).catch(() => (this.loading = false))
    }
  },
  computed: {
    ...mapGetters([
      'school'
    ]),
    noDataText () {
      const { emptyDataPNG } = this
      const style = 'margin: 15px 0px;display: flex;justify-content: center;flex-direction: column;align-items: center;'
      return `<div style="${style}"><img style="width:150px;" src="${emptyDataPNG}" alt="" /><span>暂无数据</span></div>`
    }
  },
  watch: {
    school (value, oldValue) {
      this.query.school = value ? value._id : ''
      this.load(1)
    }
  }
}
</script>
